<template>
    <div
      style="height: 60px; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; background: #fff; box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);margin-top: 20px;margin-left: 30px">
      <!-- 左侧标签页区域 -->
      <div
        style="flex: 1; height: 100%; display: flex; align-items: center; min-width: 0;width: 300px;margin-top: 10px;">
        <el-tabs v-model="activeTab" type="card" closable @tab-remove="handleTabRemove" @tab-click="handleTabClick"
          style="height: 100%; flex: 1; min-width: 0;">
          <el-tab-pane v-for="tab in tabs" :key="tab.path" :name="tab.path" :label="tab.name" :closable="tab.closable"
            style="height: calc(100% - 2px);">
            <router-view v-if="activeTab === tab.path" style="height: 100%;" />
          </el-tab-pane>
        </el-tabs>
      </div>
	  <div class="date-info" style="margin-right: 30px; color: #666; text-align: right;">
	    <div style="font-size: 16px; color: #333;">{{ currentDate }}</div>
	    <div style="font-size: 12px;">{{ academicYear }}学年第{{ semester }}学期</div>
	  </div>
      <div style="display: flex; align-items: center; margin-left: 30px; flex-shrink: 0;">
        <el-image :src="welcome_img"
          style="height: 40px; width: 40px; margin-right: 12px; border-radius: 50%; border: 1px solid #ebeef5;"></el-image>
        <span class="welcome-3d">
          您好！{{ username }}
        </span>
      </div>
    </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  data() {
    return {
      logoURL: require("@/assets/" + "eSchool.jpg"),
      welcome_img: require("@/assets/welcome.jpg"),
      user: null,
      username: '',
	  semesterConfig: {
	          startMonth: 3, // 学期开始月份
	          semesterCount: 2 // 全年学期数
	        }
    }
  },
  // 在组件选项中加入
  watch: {
    $route: {
      immediate: true, // 立即触发一次确保初始化同步
      handler(newRoute) {
        // 排除首页的特殊处理
        if (newRoute.path !== '/HomeView') {
          // 同步当前路由到激活标签
          this.setActiveTab(newRoute.fullPath)
        }
      }
    }
  },
  computed: {
    ...mapState(['tabs', 'activeTab']),
	 // 当前日期格式化（保持不变）
	    currentDate() {
	      return new Date().toLocaleDateString('zh-CN', {
	        year: 'numeric',
	        month: 'long',
	        day: 'numeric'
	      }).replace(/\//g, '-')
	    },
	
	    // 学年计算
	    academicYear() {
	      const now = new Date()
	      const year = now.getFullYear()
	      return now.getMonth() + 1 >= 9 ? `${year}-${year + 1}` : `${year - 1}-${year}`
	    },
	
	    // 学期计算
	    semester() {
	      const month = new Date().getMonth() + 1
	      return month >= 9 || month <= 1 ? '一' : '二'
	    }
  },
  mounted(){
	  sessionStorage.setItem('semester_info', JSON.stringify({
	        academicYear: this.academicYear,
	        semester: this.semester
	      }))
  },
  created() {
    this.getUserInfo()
  },
  methods: {
    ...mapMutations(['removeTab', 'setActiveTab']),

    // 标签页组件
    handleTabRemove(path) {
      if (path === '/HomeView') return

      // 记录关闭前是否激活状态
      const wasActive = this.activeTab === path

      // 提交删除操作
      this.removeTab(path)

      // 如果关闭的是当前标签，跳转新激活页
      if (wasActive) {
        this.$router.push(this.activeTab).catch(() => { })
      }
    },

    // 点击标签页切换路由
    handleTabClick(tab) {
      const targetPath = tab.paneName // 使用 el-tab-pane 的 name 属性
      this.setActiveTab(targetPath) // 显式更新状态
      if (targetPath !== this.$route.path) {
        this.$router.push(targetPath)
      }
    },

    getUserInfo() {
      const userInfo = JSON.parse(sessionStorage.getItem("user"))
      this.username = userInfo?.data?.name || '未知用户'
      this.user = userInfo
    }
  }
}
</script>

<style scoped>
.welcome-3d {
  display: inline-block;
  font-size: 28px;
  font-weight: 800;
  color: #3cadeb;
  text-transform: uppercase;
  transform: rotateX(15deg) rotateY(-5deg);
  text-shadow:
    1px 1px 1px #ffffff,
    1px 2px 1px #ffffff,
    1px 3px 1px #ffffff,
    2px 4px 6px rgba(0, 0, 0, 0.2);
  animation: float 3s ease-in-out infinite;
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0) rotateX(15deg) rotateY(-5deg);
  }

  50% {
    transform: translateY(-5px) rotateX(20deg) rotateY(5deg);
  }
}

</style>